<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view v-else>
		<view class="wrap">
			<!-- <image class="bg_img" :src=" '/images/bg.png' | formatImgUrl" mode=""></image> -->
			<view class="head">
				<view class="tit">
					可开票金额 <image :src=" '/images/nosee.png' | formatImgUrl" v-if="!isShow" @tap.stop="changeEye"></image>
					<image :src=" '/images/see.png' | formatImgUrl" v-else @tap.stop="changeEye"></image>
					<view class="withdraw" @click="$go('/showcase/showcase/invoiceDealLists')" >
						<image :src=" '/images/dealicon.png'| formatImgUrl" mode=""></image>
						正在处理 <u-icon name="arrow-right" size="12" color="#fff" class="withdraw_icon"></u-icon>
					</view>
				</view>
				
				<view class="money_num">
					{{isShow ? (datas && datas.price || 0) : '***'}}元
				</view>
				
				<view class="consumption" >
					<view class="today">
						<view class="total_tit">
							可开票订单
						</view>
						<text class="num">{{datas && datas.count || 0}}单</text>
					</view>
					<view class="today">
						<view class="total_tit">
							已开票金额（元）
						</view>
						<text class="num">{{datas && datas.money || 0}}</text>
					</view>
				</view>
			</view>
			
			<view class="discount">
				<view class="tit">
					<view class="title">
						{{navList[navIndex-1].name}}订单
						<image :src="'/images/qiehuan.png' | formatImgUrl" class="icon" @click="qiehuan()"></image>
					</view>
					<view class="tip" @click="$go('/showcase/showcase/invoiceLists')">
						多选开票
					</view>
				</view>
				<view class="item display-flex just-between" v-for="(item,index) in list" @tap="$go('/showcase/showcase/invoiceDetail?id='+item.id)">
					<view class="leftbox display-flex">
						<image :src="item.w_pic | formatImgUrl" class="avatar"></image>
						<view class="leftbox_desc">
							<view class="view1">
							消费
							</view>
							<view class="view2" >
								<block v-if="item.type == 1">现金充值粮币</block>
								<block v-if="item.type == 2">现金订单支出</block>
								<block v-if="item.type == 3">佣金充值粮币</block>
								<block v-if="item.type == 6">开通派单功能</block>
							</view>
							<view class="view3">
								<text>{{item.create_time}}</text>
						
							</view>
						</view>
					</view>
					<view class="rightbox">
						<view class="num2">
							{{item.price}}
						</view>
						<view class="status2" v-if="item.f_status == 0">
							可开票
						</view>
						<view class="status2" v-if="item.f_status == 1">
							开票中
						</view>
						<view class="status" v-if="item.f_status == 2">
							已开票
						</view>
					</view>
				</view>
				
				<view class="empytView" v-if="list.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" style="width: 200rpx;"/>
					<!-- <view>- 空列表 -</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				navList: [{
					id: 0,
					name: '可开票'
				}, {
					id: 1,
					name: '开票中'
				}, {
					id: 2,
					name: '已开票'
				}],
				navIndex: 1,
				list: [],
				datas: {},
				isShow: true,
				totalPage: true
			};
		},
		onReachBottom() {
			this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			this.page = 1;
			this.list = [];
			this.get_list()
		},
		onLoad() {
			let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.get_list()
			
			this.getDataInfo()	
		},
		methods: {
			changeEye(){
				this.isShow = !this.isShow
				this.$forceUpdate()
			},
			getDataInfo(){
				var _this = this;
				
				this.$api.default.request('invoice/getInvoiceDea', {}).then((res) => {
					if (res.code) {
						_this.datas = res.data
					}
				})
			},
			qiehuan(){
				if(this.navIndex > 2){
					this.navIndex = 1;
				}else{
					this.navIndex++
				}
				
				this.page = 1;
				this.list = [];
				this.get_list()	
			},
			get_list() {
				var _this = this;
				
				this.$api.default.request('invoice/getList', {
					page: this.page,
					f_status: this.navIndex - 1
				}).then((res) => {
					if (res.code) {
			
						if (res.data.data) {
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list = res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
					}
					
					_this.totalPage = false
				})
			},
		}
	}
</script>

<style lang="scss">
	.wrap{
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg, #45C4B0 17%, #F2F5F2 57%);
		background-size: 100% 100%;
		position: relative;
		.bg_img{
			transform: rotate(10.5deg);
			position: absolute;
			left: 300rpx;
			top: 8rpx;
			z-index: 0;
		}
		.head{
			padding: 26rpx 30rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: 300;
			.tit{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					object-fit: cover;
					margin-left: 8rpx;
				}
				.withdraw{
					width: 180rpx;
					height: 42rpx;
					border-top-left-radius: 25rpx;
					border-bottom-left-radius: 25rpx;
					background: rgba(255, 255, 255, 0.2);
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					position: absolute;
					right: 0;
					image{
						width: 26rpx;
						height: 26rpx;
						object-fit: cover;
						margin-left: 20rpx;
						margin-right: 4rpx;
					}
				}
			}
			
			.money_num{
				font-size: 60rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.consumption{
				display: flex;
				margin-top: 40rpx;
				.today{
					width: 50%;
					
					.total_tit{
						font-size: 24rpx;
						font-weight: 300;
						color: #FFFFFF;
					}
					.num{
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: 400;
					}
					
				}
			}
		}
		.choose{
			margin: 40rpx 30rpx;
			height: 166rpx;
			border-radius: 24rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 76rpx;
					height: 76rpx;
					object-fit: cover;
					margin-bottom: 4rpx;
					// border: 1rpx dotted #eee;
				}
				.tit{
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}
		.discount{
			margin: 0 30rpx 0;
			background: #fff;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			border-radius: 24rpx;
			.tit{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					font-size: 32rpx;
					font-weight: bold;
					color: #3D3D3D;
					
					.icon{
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
						object-fit: cover;
					}
				}
				.tip{
					font-family: '思源黑体';
					font-size: 12px;
					color: #45C4B0;
					
				}
			}
			.item{
				width: 100%;
				position: relative;
				overflow: hidden;
				padding: 10rpx 0;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.leftbox{
					width: 70%;
					font-family: Source Han Sans CN;
					font-size: 10px;
					color: #999999;
					
					.avatar{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}
					
					.view1{
						font-family: Source Han Sans CN;
						font-size: 14px;
						font-weight: 600;
						color: #3D3D3D;
					}
					
					.view2{
						margin: 4rpx 0;
					}
					
				}
				
				.rightbox{
					text-align: right;
					
					.num{
						font-family: Source Han Sans CN;
						font-size: 18px;
						font-weight: bold;
						color: #45C4B0;
						margin-bottom: 4rpx;
					}
					
					.num2{
						font-family: Source Han Sans CN;
						font-size: 18px;
						font-weight: bold;
						color: #3D3D3D;
						margin-bottom: 4rpx;
					}
					
					.status{
						font-family: Source Han Sans CN;
						font-size: 10px;
						color: #45C4B0;
					}
					
					.status2{
						font-family: Source Han Sans CN;
						font-size: 10px;
						color: #999;
					}
				}
			}
		}
	}
	
</style>
